<template>
  <div id="tabbar">
    <van-tabbar active-color="red" v-model="active" placeholder>
       <van-tabbar-item
        @click="switchTab(routerlist[0].path)"
        ><span>首页</span>
        <template #icon="props">
          <img
            :src="props.active ? routerlist[0].selected : routerlist[0].actived"
            slot="icon"
            alt=""
          />
        </template>       
      </van-tabbar-item>
       <van-tabbar-item
        @click="switchTab(routerlist[1].path)"
        ><span>分类</span>
        <template #icon="props">
          <img
            :src="props.active ? routerlist[1].selected : routerlist[1].actived"
            slot="icon"
            alt=""
          />
        </template>       
      </van-tabbar-item>
      <van-tabbar-item
        @click="switchTab(routerlist[2].path)"
        ><span>卡清单</span>
        <template #icon="props">
          <img
            :src="props.active ? routerlist[2].selected : routerlist[2].actived"
            slot="icon"
            alt=""
          />
        </template>       
      </van-tabbar-item>
      <van-tabbar-item
        @click="switchTab(routerlist[3].path)"
        ><span>我的</span>
        <template #icon="props">
          <img
            :src="props.active ? routerlist[3].selected : routerlist[3].actived"
            slot="icon"
            alt=""
          />
        </template>       
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  ////$route.path.includes(item.path) ? item.active : item.selected
  data() {
    return {
      active:  0,
      routerlist: [
        {
          title: "首页",
          name: "home",
          path: "/",
          actived: require("../../public/images/tubiao/houser.png"),
          selected: require("../../public/images/tubiao/houser1.png"),
        },
        {
          title: "分类",
          path: "/sort",
          name: "sort",
          actived: require("../../public/images/tubiao/fenlei.png"),
          selected: require("../../public/images/tubiao/fenlei2.png"),
        },
        {
          title: "卡清单",
          name: "lpkcart",
          path: "/lpkcart",
          actived: require("../../public/images/tubiao/list.png"),
          selected: require("../../public/images/tubiao/list.png"),
        },
        {
          title: "我的",
          name: "user",
          path: "/user",
          actived: require("../../public/images/tubiao/me.png"),
          selected: require("../../public/images/tubiao/me.png"),
        },
      ],
    };
  },
  methods: {
    switchTab(path) {
      this.$router.push(path);
    },
  },

};
</script>
